<style>
    #test + .layui-table-view .layui-table-body tbody > tr > td {
        padding: 0;
    }

    #test + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: 85px;
    }
</style>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 数据表格 -->
            <table id="test" lay-filter="test"></table>
        </div>
    </div>
</div>

<script type="text/html" id="kongTypeTpl">
    <input type="radio" data-id="{{d.id}}" name="kong_type_{{d.id}}" value="0" title="默认" lay-filter="kongType" {{
           d.kong_type== 0 ? 'checked' : '' }}>
    <br>
    <input type="radio" data-id="{{d.id}}" name="kong_type_{{d.id}}" value="1"  lay-filter="kongType" {{
           d.kong_type== 1 ? 'checked' : '' }}><span style="color: #FF5722">盈盈盈</span>
    <br>
    <input type="radio" data-id="{{d.id}}" name="kong_type_{{d.id}}" value="2" lay-filter="kongType" {{
           d.kong_type== 2 ? 'checked' : '' }}><span style="color: #5FB878">亏亏亏</span>
</script>

<!-- js部分 -->
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/libs/layui/layui.js"></script>
<script type="text/javascript" src="__TPL_RESOURCE_BACKEND__/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#test',
            url: "{{:url('Order/index')}}",
            page: {
                limit: 1000000
            },
            method: 'post',
            contentType: 'application/json',
            toolbar: true,
            cols: [[
                {field: 'id', title: 'ID', width: 70},
                {field: 'user_account_txt', title: '账号'},
                {
                    title: '订单信息', templet: function (d) {
                        return '<span>名称：'+ d.product_name  +'</span><br>' +
                            '<span>时间：'+ d.buytime  +'</span>';
                    }, align: 'left', width: 210
                },
                {
                    title: '状态', templet: function (d) {
                        return [
                            '<span style="color: #C2C2C2;">建仓</span>',
                            '<span style="color: #5FB878;">平仓</span>',
                        ][d.status];
                    }, align: 'center', width: 60
                },
                {
                    title: '方向', templet: function (d) {
                        return [
                            '',
                            '<span style="color: #FF5722;">买涨</span>',
                            '<span style="color: #5FB878;">买跌</span>',
                        ][d.type];
                    }, align: 'center', width: 60
                },
                {
                    title: '时间', templet: function (d) {
                        return d.endprofit + '秒';
                    }, align: 'center', width: 80
                },
                {field: 'buyprice', title: '建仓点位',width: 100},
                {
                    title: '利率', templet: function (d) {
                        return d.endloss + '%';
                    }, width: 60
                },
                {field: 'sellprice', title: '平仓点位',width: 100},
                {field: 'fee', title: '委托余额'},
                {
                    title: '实际盈亏', templet: function (d) {
                        if (d.ploss > 0) {
                            return '<span style="color: #FF5722;">￥' + d.ploss + '</span>'
                        } else {
                            return '<span style="color: #5FB878;">￥' + d.ploss + '</span>'
                        }
                    }, width: 100
                },
                {field: 'commission', title: '买后余额'},
                {title: '控制盈亏', width: 90, templet: '#kongTypeTpl'}
            ]]
        });

        /* 表格搜索 */
        form.on('submit(search)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        //检测是否有新的订单
        var count = 0;

        function ajaxOrder() {
            $.ajax({
                url: "{{:url('Index/getOrderCount')}}",
                type: 'post',
                data: {},
                success: function (res) {
                    if (res.data.count != count) {
                        count = res.data.count;
                        insTb.reload({where: {}, page: {curr: 1}});
                        return false;
                    }
                }, error: function (err) {
                    console.log(err)
                }
            });
        }

        setInterval(ajaxOrder, 10000);

        //监听控制
        form.on('radio(kongType)', function (obj) {
            var id = obj.elem.getAttribute('data-id');  // 获取当前被修改的行的 ID
            var kongType = obj.value;  // 获取当前选中的值

            var loading = layer.load(3);
            $.ajax({
                url: "{{:url('Order/editKongType')}}",
                type: 'post',
                data: {
                    id: id,
                    kong_type: kongType
                },
                success: function (res) {
                    if (res.code != 0) {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    } else {
                        layer.msg(res.msg, {icon: 1, time: 1500});
                        insTb.reload();
                    }
                    layer.close(loading);
                }, error: function () {
                    layer.close(loading);
                    layer.msg('网络错误请稍后重试', {icon: 5, time: 1000});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
